<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站商品列表样式展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #e63946;
            --secondary-color: #d62828;
            --accent-color: #f1faee;
            --light-color: #f8f9fa;
            --dark-color: #1d3557;
            --gray-color: #6c757d;
            --light-gray: #e9ecef;
            --success-color: #2a9d8f;
            --like-color: #e63946;
            --bookmark-color: #ffb703;
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f5f5f5;
            color: var(--dark-color);
            line-height: 1.6;
            padding: 30px 0;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .page-header h1 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .list-example {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        
        .example-title {
            font-size: 1.5rem;
            margin-bottom: 25px;
            color: var(--primary-color);
            padding-bottom: 12px;
            border-bottom: 1px solid var(--light-gray);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .example-description {
            color: var(--gray-color);
            margin-bottom: 25px;
            font-size: 0.95rem;
        }
        
        /* 商品卡片通用样式 */
        .product-card {
            border-radius: 10px;
            overflow: hidden;
            transition: var(--transition);
            position: relative;
            background-color: #fff;
        }
        
        .product-card:not(:last-child) {
            margin-bottom: 25px;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        /* 商品图片样式 */
        .product-image {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.05);
        }
        
        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: var(--primary-color);
            color: white;
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .product-badge.discount {
            background-color: var(--like-color);
        }
        
        .product-badge.new {
            background-color: var(--success-color);
        }
        
        .quick-view {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(29, 53, 87, 0.8);
            color: white;
            text-align: center;
            padding: 8px;
            font-size: 0.9rem;
            transform: translateY(100%);
            transition: var(--transition);
            cursor: pointer;
        }
        
        .product-card:hover .quick-view {
            transform: translateY(0);
        }
        
        /* 商品信息样式 */
        .product-info {
            padding: 15px 0;
        }
        
        .product-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0 0 8px 0;
            color: var(--dark-color);
            transition: var(--transition);
        }
        
        .product-card:hover .product-title {
            color: var(--primary-color);
        }
        
        .product-vendor {
            font-size: 0.85rem;
            color: var(--gray-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .product-price {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .current-price {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .original-price {
            font-size: 0.9rem;
            color: var(--gray-color);
            text-decoration: line-through;
        }
        
        .product-rating {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }
        
        .rating-stars {
            color: #ffb703;
        }
        
        .product-description {
            margin-bottom: 15px;
            line-height: 1.6;
            font-size: 0.9rem;
            color: #495057;
        }
        
        /* 卖家信息样式 */
        .product-seller {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .seller-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--light-gray);
        }
        
        .seller-name {
            font-weight: 500;
        }
        
        .verified-badge {
            color: #165DFF;
            font-size: 0.8rem;
        }
        
        /* 统计数据样式 */
        .product-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 0.85rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--gray-color);
        }
        
        .stat-item strong {
            color: var(--dark-color);
        }
        
        /* 操作按钮样式 */
        .product-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        
        .btn-icon {
            color: var(--gray-color);
            background: none;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .btn-icon:hover {
            background-color: rgba(230, 57, 70, 0.1);
            color: var(--primary-color);
        }
        
        .btn-icon.liked {
            color: var(--like-color);
        }
        
        .btn-icon.saved {
            color: var(--bookmark-color);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background-color: var(--light-gray);
            color: var(--dark-color);
            border: none;
            padding: 8px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-secondary:hover {
            background-color: var(--gray-color);
            color: white;
            transform: translateY(-2px);
        }
        
        /* 网格布局样式 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }
        
        .grid-layout .product-card {
            border: 1px solid var(--light-gray);
            padding: 15px;
        }
        
        .grid-layout .product-image {
            height: 200px;
            margin-bottom: 15px;
        }
        
        .grid-layout .product-description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 大图布局样式 */
        .large-image-layout .product-card {
            display: flex;
            gap: 25px;
            padding: 20px;
            border: 1px solid var(--light-gray);
        }
        
        .large-image-layout .product-image {
            flex: 0 0 300px;
            height: 250px;
        }
        
        .large-image-layout .product-details {
            flex: 1;
        }
        
        /* 瀑布流布局样式 */
        .masonry-layout {
            column-count: 1;
            column-gap: 25px;
        }
        
        @media (min-width: 768px) {
            .masonry-layout {
                column-count: 2;
            }
        }
        
        @media (min-width: 992px) {
            .masonry-layout {
                column-count: 3;
            }
        }
        
        .masonry-layout .product-card {
            break-inside: avoid;
            margin-bottom: 25px;
            border: 1px solid var(--light-gray);
            padding: 15px;
        }
        
        .masonry-layout .product-image {
            margin-bottom: 15px;
        }
        
        .masonry-layout .product-image.tall {
            height: 300px;
        }
        
        .masonry-layout .product-image.medium {
            height: 220px;
        }
        
        .masonry-layout .product-image.short {
            height: 180px;
        }
        
        /* 简约列表布局样式 */
        .simple-list-layout .product-card {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 1px solid var(--light-gray);
            gap: 15px;
        }
        
        .simple-list-layout .product-image {
            flex: 0 0 100px;
            height: 100px;
        }
        
        .simple-list-layout .product-info {
            flex: 1;
            padding: 0;
        }
        
        .simple-list-layout .product-description {
            display: none;
        }
        
        .simple-list-layout .product-stats {
            margin-bottom: 0;
        }
        
        /* 社交风格布局 */
        .social-style-layout .product-card {
            border: 1px solid var(--light-gray);
            border-radius: 15px;
            overflow: hidden;
        }
        
        .social-style-layout .product-header {
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .social-style-layout .product-image {
            border-radius: 0;
        }
        
        .social-style-layout .product-content {
            padding: 15px;
        }
        
        .social-style-layout .product-actions {
            padding: 10px 15px;
            border-top: 1px solid var(--light-gray);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .large-image-layout .product-card {
                flex-direction: column;
            }
            
            .large-image-layout .product-image {
                width: 100%;
                flex: none;
            }
            
            .product-actions, .action-buttons {
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .simple-list-layout .product-card {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .simple-list-layout .product-image {
                width: 100%;
                flex: none;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>社交网站商品列表样式展示</h1>
            <p class="text-muted">展示不同风格的社交电商商品列表，融合社交互动与商品展示功能</p>
        </div>
        
        <!-- 示例1：网格布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-th"></i> 网格布局商品</h3>
            <p class="example-description">整齐的网格布局，适合展示多个商品，每个商品信息完整，视觉效果统一</p>
            
            <div class="grid-layout">
                <!-- 商品1 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/600/400?random=21" alt="时尚运动鞋，白色为主，带有蓝色装饰">
                        <div class="product-badge discount">8折</div>
                        <div class="quick-view">快速查看</div>
                    </div>
                    
                    <div class="product-info">
                        <h3 class="product-title">夏季透气运动鞋</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>运动装备官方店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥359</span>
                            <span class="original-price">¥449</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span>(128)</span>
                        </div>
                        
                        <div class="product-description">
                            超轻透气运动鞋，适合跑步、健身等多种运动场景，缓震鞋底保护膝盖。
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span><strong>326</strong> 已售</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>542</strong> 喜欢</span>
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-shopping-cart"></i>
                                <span>加入购物车</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 商品2 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/600/400?random=22" alt="无线蓝牙耳机，黑色设计，充电盒小巧">
                        <div class="product-badge new">新品</div>
                        <div class="quick-view">快速查看</div>
                    </div>
                    
                    <div class="product-info">
                        <h3 class="product-title">无线蓝牙耳机</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>数码科技旗舰店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥299</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span>(87)</span>
                        </div>
                        
                        <div class="product-description">
                            主动降噪蓝牙耳机，续航长达24小时，IPX7防水，高清通话麦克风。
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span><strong>156</strong> 已售</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>329</strong> 喜欢</span>
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-shopping-cart"></i>
                                <span>加入购物车</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 商品3 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/600/400?random=23" alt="有机保湿面霜，白色瓶身，带有天然植物图案">
                        <div class="quick-view">快速查看</div>
                    </div>
                    
                    <div class="product-info">
                        <h3 class="product-title">天然有机保湿面霜</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>天然护肤品牌店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥189</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span>(215)</span>
                        </div>
                        
                        <div class="product-description">
                            100%天然有机成分，适合敏感肌肤，深层保湿不油腻，24小时锁水。
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span><strong>427</strong> 已售</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>683</strong> 喜欢</span>
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-shopping-cart"></i>
                                <span>加入购物车</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 商品4 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/600/400?random=24" alt="复古机械键盘，黑色按键，白色字体">
                        <div class="product-badge discount">75折</div>
                        <div class="quick-view">快速查看</div>
                    </div>
                    
                    <div class="product-info">
                        <h3 class="product-title">复古机械键盘</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>电竞外设专营店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥374</span>
                            <span class="original-price">¥499</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span>(56)</span>
                        </div>
                        
                        <div class="product-description">
                            青轴机械键盘，复古打字机风格，USB有线连接，支持全键无冲，背光可调。
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span><strong>98</strong> 已售</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>215</strong> 喜欢</span>
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-shopping-cart"></i>
                                <span>加入购物车</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例2：大图布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-image"></i> 大图布局商品</h3>
            <p class="example-description">左侧大图展示，右侧详细信息，适合突出商品细节，展示更多产品描述</p>
            
            <div class="large-image-layout">
                <!-- 商品1 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/800/600?random=25" alt="智能手表，黑色表带，方形表盘，显示多种功能界面">
                        <div class="product-badge new">新品</div>
                        <div class="quick-view">快速查看</div>
                    </div>
                    
                    <div class="product-details">
                        <h3 class="product-title">全功能智能手表</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>智能穿戴官方旗舰店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥899</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span>(326 评价)</span>
                        </div>
                        
                        <div class="product-description">
                            这款全功能智能手表搭载最新处理器，支持心率、血氧、睡眠监测等健康功能。1.78英寸高清触控屏，IP68级防水，续航可达14天。支持100+运动模式，内置GPS，可独立接打电话和收发消息。兼容iOS和Android系统，是您健康管理和运动追踪的理想伴侣。
                        </div>
                        
                        <div class="product-seller">
                            <img src="https://picsum.photos/100/100?random=201" alt="卖家头像" class="seller-avatar">
                            <div>
                                <span class="seller-name">智能穿戴官方旗舰店</span>
                                <span class="verified-badge"><i class="fas fa-check-circle"></i> 官方认证</span>
                            </div>
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span>已售: <strong>1,256</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>收藏: <strong>3,421</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>评论: <strong>326</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-truck"></i>
                                <span>发货地: <strong>上海</strong></span>
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-comment"></i>
                                    <span>咨询</span>
                                </button>
                            </div>
                            
                            <div>
                                <button class="btn-secondary">
                                    <i class="fas fa-eye"></i>
                                    <span>查看详情</span>
                                </button>
                                <button class="btn-primary">
                                    <i class="fas fa-shopping-cart"></i>
                                    <span>加入购物车</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品2 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/800/600?random=26" alt="手工编织棉麻沙发垫，米色底色，带有几何图案">
                        <div class="product-badge discount">9折</div>
                        <div class="quick-view">快速查看</div>
                    </div>
                    
                    <div class="product-details">
                        <h3 class="product-title">北欧风棉麻沙发垫套装</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>家居生活美学馆</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥269</span>
                            <span class="original-price">¥299</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span>(187 评价)</span>
                        </div>
                        
                        <div class="product-description">
                            北欧风格棉麻沙发垫套装，采用天然棉麻面料，透气舒适，耐磨耐用。手工编织几何图案，简约时尚，适合各种家居风格。防滑底部设计，不易移位。可机洗，方便打理。套装包含1个三人位垫+2个单人位垫+2个靠枕套，多种尺寸可选。
                        </div>
                        
                        <div class="product-seller">
                            <img src="https://picsum.photos/100/100?random=202" alt="卖家头像" class="seller-avatar">
                            <div>
                                <span class="seller-name">家居生活美学馆</span>
                                <span class="verified-badge"><i class="fas fa-check-circle"></i> 优质卖家</span>
                            </div>
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span>已售: <strong>876</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>收藏: <strong>2,154</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>评论: <strong>187</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-truck"></i>
                                <span>发货地: <strong>杭州</strong></span>
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-comment"></i>
                                    <span>咨询</span>
                                </button>
                            </div>
                            
                            <div>
                                <button class="btn-secondary">
                                    <i class="fas fa-eye"></i>
                                    <span>查看详情</span>
                                </button>
                                <button class="btn-primary">
                                    <i class="fas fa-shopping-cart"></i>
                                    <span>加入购物车</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例3：社交风格布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-users"></i> 社交风格商品</h3>
            <p class="example-description">融入社交元素的商品展示，突出卖家和用户互动，增强社区感</p>
            
            <div class="social-style-layout">
                <!-- 商品1 -->
                <div class="product-card">
                    <div class="product-header">
                        <img src="https://picsum.photos/100/100?random=203" alt="卖家头像" class="seller-avatar">
                        <div>
                            <span class="seller-name">小李的手作工坊</span>
                            <span class="verified-badge"><i class="fas fa-check-circle"></i> 创作者认证</span>
                        </div>
                    </div>
                    
                    <div class="product-image">
                        <img src="https://picsum.photos/800/600?random=27" alt="手工皮革笔记本，棕色封面，带有缝线装饰">
                    </div>
                    
                    <div class="product-content">
                        <h3 class="product-title">手工真皮笔记本</h3>
                        
                        <div class="product-price">
                            <span class="current-price">¥159</span>
                        </div>
                        
                        <div class="product-description">
                            纯手工制作的真皮笔记本，采用优质头层牛皮，质感细腻。内页采用环保纸张，可替换。每一件都是独一无二的手工作品，适合作为礼物或个人使用。支持定制刻字服务。
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span>(42 评价)</span>
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span>已售 <strong>126</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>42 条评论</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <div class="action-buttons">
                            <button class="btn-icon">
                                <i class="far fa-heart"></i>
                                <span>喜欢</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                        
                        <button class="btn-primary">
                            <i class="fas fa-shopping-cart"></i>
                            <span>购买</span>
                        </button>
                    </div>
                </div>
                
                <!-- 商品2 -->
                <div class="product-card">
                    <div class="product-header">
                        <img src="https://picsum.photos/100/100?random=204" alt="卖家头像" class="seller-avatar">
                        <div>
                            <span class="seller-name">自然香薰工作室</span>
                            <span class="verified-badge"><i class="fas fa-check-circle"></i> 创作者认证</span>
                        </div>
                    </div>
                    
                    <div class="product-image">
                        <img src="https://picsum.photos/800/600?random=28" alt="香薰蜡烛套装，三个不同颜色的玻璃罐，带有植物装饰">
                    </div>
                    
                    <div class="product-content">
                        <h3 class="product-title">天然精油香薰蜡烛套装</h3>
                        
                        <div class="product-price">
                            <span class="current-price">¥129</span>
                        </div>
                        
                        <div class="product-description">
                            纯天然植物精油香薰蜡烛，不含有害化学物质。套装包含三种香型：薰衣草（助眠）、柑橘（提神）、雪松（舒缓）。每个蜡烛可燃烧约30小时，玻璃罐可重复使用。
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span>(78 评价)</span>
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span>已售 <strong>256</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>78 条评论</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <div class="action-buttons">
                            <button class="btn-icon liked">
                                <i class="fas fa-heart"></i>
                                <span>喜欢</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                        
                        <button class="btn-primary">
                            <i class="fas fa-shopping-cart"></i>
                            <span>购买</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例4：简约列表布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-list"></i> 简约列表布局商品</h3>
            <p class="example-description">简洁的列表式布局，突出商品核心信息，适合快速浏览大量商品</p>
            
            <div class="simple-list-layout">
                <!-- 商品1 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/400/400?random=29" alt="便携式蓝牙音箱，圆柱形设计，黑色">
                        <div class="product-badge discount">85折</div>
                    </div>
                    
                    <div class="product-info">
                        <h3 class="product-title">便携式蓝牙音箱</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>音频设备专营店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥179</span>
                            <span class="original-price">¥209</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span>(96)</span>
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span><strong>324</strong> 已售</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>512</strong> 喜欢</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <div class="action-buttons">
                            <button class="btn-icon">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="btn-primary">
                                <i class="fas fa-shopping-cart"></i>
                                <span>加入购物车</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 商品2 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/400/400?random=30" alt="纯棉印花T恤，白色底色，带有卡通图案">
                    </div>
                    
                    <div class="product-info">
                        <h3 class="product-title">纯棉卡通印花T恤</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>潮流服饰店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥89</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span>(156)</span>
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span><strong>876</strong> 已售</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>1,245</strong> 喜欢</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <div class="action-buttons">
                            <button class="btn-icon liked">
                                <i class="fas fa-heart"></i>
                            </button>
                            <button class="btn-primary">
                                <i class="fas fa-shopping-cart"></i>
                                <span>加入购物车</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 商品3 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/400/400?random=31" alt="不锈钢保温杯，银色外观，简约设计">
                        <div class="product-badge new">新品</div>
                    </div>
                    
                    <div class="product-info">
                        <h3 class="product-title">真空不锈钢保温杯</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>家居用品旗舰店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥129</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span>(78)</span>
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span><strong>215</strong> 已售</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>369</strong> 喜欢</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <div class="action-buttons">
                            <button class="btn-icon">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="btn-primary">
                                <i class="fas fa-shopping-cart"></i>
                                <span>加入购物车</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 商品4 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/400/400?random=32" alt="有机绿茶茶叶罐，绿色包装，带有茶叶图案">
                    </div>
                    
                    <div class="product-info">
                        <h3 class="product-title">有机绿茶礼盒装</h3>
                        
                        <div class="product-vendor">
                            <i class="fas fa-store"></i>
                            <span>茶叶特产店</span>
                        </div>
                        
                        <div class="product-price">
                            <span class="current-price">¥258</span>
                        </div>
                        
                        <div class="product-rating">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span>(42)</span>
                        </div>
                        
                        <div class="product-stats">
                            <div class="stat-item">
                                <i class="fas fa-shopping-cart"></i>
                                <span><strong>98</strong> 已售</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span><strong>156</strong> 喜欢</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <div class="action-buttons">
                            <button class="btn-icon liked">
                                <i class="fas fa-heart"></i>
                            </button>
                            <button class="btn-primary">
                                <i class="fas fa-shopping-cart"></i>
                                <span>加入购物车</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 点赞功能交互
        document.querySelectorAll('.btn-icon').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 点赞按钮交互
                if (this.querySelector('.fa-heart')) {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('.fa-heart');
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                }
                
                // 分享按钮交互
                if (this.querySelector('.fa-share-square')) {
                    const productTitle = this.closest('.product-card').querySelector('.product-title').textContent.trim();
                    alert(`分享商品: "${productTitle}"`);
                }
                
                // 评论/咨询按钮交互
                if (this.querySelector('.fa-comment')) {
                    const productTitle = this.closest('.product-card').querySelector('.product-title').textContent.trim();
                    alert(`咨询商品: "${productTitle}"`);
                }
            });
        });
        
        // 加入购物车按钮交互
        document.querySelectorAll('.btn-primary').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const productTitle = this.closest('.product-card').querySelector('.product-title').textContent.trim();
                const productPrice = this.closest('.product-card').querySelector('.current-price').textContent.trim();
                alert(`已将 "${productTitle}" ${productPrice} 加入购物车`);
            });
        });
        
        // 查看详情按钮交互
        document.querySelectorAll('.btn-secondary').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const productTitle = this.closest('.product-card').querySelector('.product-title').textContent.trim();
                alert(`查看 "${productTitle}" 的详细信息`);
            });
        });
        
        // 快速查看交互
        document.querySelectorAll('.quick-view').forEach(view => {
            view.addEventListener('click', function(e) {
                e.preventDefault();
                const productTitle = this.closest('.product-card').querySelector('.product-title').textContent.trim();
                alert(`快速查看 "${productTitle}"`);
            });
        });
    </script>
</body>
</html>
    
